<template>
  <div class="register" v-loading="loading">
    <section>
      <div class="leaves">
        <div class="set">
          <div><img src="../../assets/images/leaf_01.png" /></div>
          <div><img src="../../assets/images/leaf_02.png" /></div>
          <div><img src="../../assets/images/leaf_03.png" /></div>
          <div><img src="../../assets/images/leaf_04.png" /></div>
          <div><img src="../../assets/images/leaf_01.png" /></div>
          <div><img src="../../assets/images/leaf_02.png" /></div>
          <div><img src="../../assets/images/leaf_03.png" /></div>
          <div><img src="../../assets/images/leaf_04.png" /></div>
        </div>
      </div>
      <img src="../../assets/images/bg.jpg" class="bg" />
      <img
        src="../../assets/images/dog.png"
        class="dog"
        style="margin-top: 200px"
      />
      <img src="../../assets/images/trees.png" class="trees" />
      <div class="login reg-box">
        <div class="title">用户注册</div>

        <div class="innner">
          <div class="inputBox">
            <span class="input-label">用户名:</span>
            <input
              type="text"
              v-model="formData.username"
              autocomplete="off"
              placeholder="用户名"
            />
          </div>
          <div class="inputBox">
            <span class="input-label">密码:</span>
            <input
              v-model="formData.password"
              autocomplete="off"
              placeholder="密码"
            />
          </div>
          <div class="inputBox">
            <span class="input-label">qq邮箱:</span>
            <input
              v-model="formData.userEmail"
              autocomplete="off"
              placeholder="qq邮箱"
            />
          </div>
          <div class="inputBox">
            <span class="input-label">昵称:</span>
            <input
              v-model="formData.nickName"
              autocomplete="off"
              placeholder="用户昵称"
            />
          </div>
          <div class="inputBox">
            <span class="input-label">性别:</span>

            <input
              v-model="formData.sex"
              autocomplete="off"
              placeholder="性别"
            />
          </div>
          <div class="inputBox">
            <span class="input-label">手机:</span>

            <input
              v-model="formData.phone"
              autocomplete="off"
              placeholder="手机号"
            />
          </div>
          <div class="inputBox">
            <span class="input-label">地址:</span>

            <input
              v-model="formData.address"
              autocomplete="off"
              placeholder="地址"
            />
          </div>

          <div class="inputBox">
            <input type="submit" @click="submit" value="注册" id="btn" />
          </div>
        </div>
        <div class="back" @click="router.push('/login')">
          <div>
            <el-icon><ArrowLeftBold /></el-icon>
          </div>
          <div>返回</div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";

import { ElMessage } from "element-plus";
import { userRegister } from "@/api/user";
import { useRouter } from "vue-router";
import { ArrowLeftBold } from "@element-plus/icons-vue";
const loading = ref(false);
const router = useRouter();
const formData = reactive<any>({
  username: "",
  password: "",
  userEmail: "",
  nickName: "",
  phone: "",
  sex: "",
  address: "",
});
const submit = async () => {
  if (
    !formData.username ||
    !formData.password ||
    !formData.userEmail ||
    !formData.nickName ||
    !formData.sex ||
    !formData.phone ||
    !formData.address
  ) {
    ElMessage({
      message: "请完整输入信息",
      type: "warning",
    });
    return;
  } else {
    if (!/^[1-9][0-9]{4,10}@qq.com$/.test(formData.userEmail)) {
      ElMessage({
        message: "qq邮箱格式不对，请重输",
        type: "warning",
      });
      return;
    }
    if (!(formData.sex === "男" || formData.sex === "女")) {
      ElMessage({
        message: "性别格式不对，请重输",
        type: "warning",
      });
      return;
    }
    if (!/^[1][0-9]{10}$/.test(formData.phone)) {
      ElMessage({
        message: "手机号格式不对，请重输",
        type: "warning",
      });
      return;
    }

    await userRegister(formData).then((res: any) => {
      if (!res) {
        return;
      }
      ElMessage({
        message: res.message,
        type: "success",
      });
      router.push("/login");
    });
  }
};
</script>

<style scoped lang="less">
.register {
  /* google front */
  /* @import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap'); */
  @import "./google-front.css";
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    font-family: "Poppins", sans-serif;
  }

  section {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    overflow-x: hidden;
  }
  section .title {
    font-size: 33px;
    color: #8f2c24;
    font-weight: bold;
    text-align: center;
    height: 50px;
    margin-top: -10px;
    line-height: 50px;
    width: 100%;
  }
  section .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
  }

  section .trees {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 100;
    pointer-events: none;
  }

  section .dog {
    position: absolute;
    scale: 0.65;
    animation: animateDog 15s linear infinite;
    pointer-events: none;
  }

  @keyframes animateDog {
    0% {
      transform: translateX(calc(50% + 100vw));
    }
    50% {
      transform: translateX(calc(-100% - 100vw));
    }
    50.01% {
      transform: translateX(calc(-100% - 100vw)) rotateY(180deg);
    }
    100% {
      transform: translateX(calc(50% + 100vw)) rotateY(180deg);
    }
  }
  section .aMeng {
    position: absolute;
    scale: 0.65;
    animation: animateAMeng 10s linear infinite;
    pointer-events: none;
  }

  @keyframes animateAMeng {
    0% {
      transform: translateX(calc(50% - 100vw)) rotateY(180deg);
    }
    50% {
      transform: translateX(calc(-100% + 100vw)) rotateY(180deg);
    }
    50.01% {
      transform: translateX(calc(-100% + 100vw));
    }
    100% {
      transform: translateX(calc(50% - 100vw));
    }
  }

  .login {
    position: relative;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(15px);
    width: 500px;
    border-radius: 20px;
    border: 1px solid #fff;
    border-right-color: rgba(255, 255, 255, 0.5);
    border-bottom-color: rgba(255, 255, 255, 0.5);
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
  .login .inputBox .gray-tip {
    font-size: 12px;
    color: gray;
    margin-top: 5px;
    position: fixed;
  }
  .login .title,
  .login .inputBox .gray-tip {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .login .inputBox input {
    position: relative;
    width: 100%;
    padding: 15px 20px;
    outline: none;
    font-size: 1em;
    /* color: #8f2c24; */
    border-radius: 5px;
    background-color: #fff;
    border: none;
  }

  .login .inputBox ::placeholder {
    color: #8f2c24;
  }

  .login .inputBox #btn {
    position: relative;
    border: none;
    outline: none;
    background-color: #8f2c24;
    color: #fff;
    cursor: pointer;
    font-size: 1.25em;
    font-weight: 500;
    transition: 0.5s;
  }

  .login .inputBox #btn:hover {
    background-color: #d64c42;
  }

  .login .group {
    display: flex;
    justify-content: space-between;
  }

  .login .group a {
    font-size: 1.25em;
    color: #8f2c24;
    font-weight: 500;
    text-decoration: none;
  }

  .login .group a:nth-child(2) {
    text-decoration: underline;
  }

  .leaves {
    position: absolute;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    pointer-events: none;
  }

  .leaves .set {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    pointer-events: none;
  }

  .leaves .set div {
    position: absolute;
    display: block;
  }

  .leaves .set div:nth-child(1) {
    left: 20%;
    animation: animate 20s linear infinite;
  }
  .leaves .set div:nth-child(2) {
    left: 50%;
    animation: animate 14s linear infinite;
  }
  .leaves .set div:nth-child(3) {
    left: 70%;
    animation: animate 12s linear infinite;
  }
  .leaves .set div:nth-child(4) {
    left: 5%;
    animation: animate 15s linear infinite;
  }
  .leaves .set div:nth-child(5) {
    left: 85%;
    animation: animate 18s linear infinite;
  }
  .leaves .set div:nth-child(6) {
    left: 90%;
    animation: animate 12s linear infinite;
  }
  .leaves .set div:nth-child(7) {
    left: 15%;
    animation: animate 14s linear infinite;
  }
  .leaves .set div:nth-child(8) {
    left: 60%;
    animation: animate 15s linear infinite;
  }

  @keyframes animate {
    0% {
      opacity: 0;
      top: -10%;
      transform: translateX(20px) rotate(0deg);
    }
    10% {
      opacity: 1;
    }
    20% {
      transform: translateX(-20px) rotate(45deg);
    }
    40% {
      transform: translateX(-20px) rotate(90deg);
    }
    60% {
      transform: translateX(20px) rotate(180deg);
    }
    80% {
      transform: translateX(-20px) rotate(45deg);
    }
    100% {
      top: 110%;
      transform: translateX(20px) rotate(225deg);
    }
  }

  .reg-box {
    position: relative;
    .back {
      position: absolute;
      top: 20px;
      left: 20px;
      display: flex;
      align-items: center;
      color: #8f2c24;
      font-size: 1rem;
      cursor: pointer;
    }
  }

  .title {
    margin-top: 10px;
  }
  .innner {
    margin-top: -30px;
  }
  .inputBox {
    margin-top: 20px;
    display: flex;
    font-size: 1.25em;
    justify-content: center;
    align-items: center;
  }
  .input-label {
    width: 100px;
    text-align: right;
    margin-right: 20px;
    color: #8f2c24;
    font-weight: bold;
  }
}
</style>
